<template>
	<view>
		<view class="presentation">
			<text class="subtitle">tui-notice-bar 通告栏</text>
			<text class="describe">通告栏：用于循环播放展示一组消息通知。</text>
		</view>
		<view class="presentation_subtitle">基本用法</view>
		<notice :text="'技术是开发它的人的共同灵魂'" ></notice>
		<view class="presentation_subtitle">垂直滚动</view>
		<notice :list="marqueeList"></notice>
		<view class="presentation_subtitle">通知栏模式</view>
		<notice :text="'技术是开发它的人的共同灵魂。技术是开发它的人的共同灵魂'" :close="true" :icon="false" :animateLeft="false"></notice>
		<view class="presentation_subtitle">单行模式</view>
		<notice :text="'技术是开发它的人的共同灵魂。技术是开发它的人的共同灵魂发它的人的共同灵魂。技术是开发它的人的共同灵魂'" :close="false" :icon="false" :animateLeft="false" :isWarp="true"></notice>
		<view class="presentation_subtitle">多行模式</view>
		<notice :text="'技术是开发它的人的共同灵魂。技术是开发它的人的共同灵魂发它的人的共同灵魂。技术是开发它的人的共同灵魂'" :close="false" :icon="false" :animateLeft="false"></notice>
		<view class="presentation_subtitle">关闭通知栏</view>
		<notice :text="'技术是开发它的人的共同灵魂'" :icon="false" :close="true"></notice>
	</view>
</template>
<script>
	import notice from '../../components/ker-notice-bar/ker-notice-bar.vue'
export default {
	components:{
		notice
	},
	data() {
		return {
			marqueeList:[
				'在代码阅读过程中人们说脏话的频率是衡量1',
				'在代码阅读过程中人们说脏话的频率是衡量2',
				'在代码阅读过程中人们说脏话的频率是衡量3'
			]
		};
	},
	methods: {},
	mounted() {}
};
</script>
<style lang="scss" scoped>
	.presentation {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px 40px;
		.subtitle {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	
		.describe {
			font-size: 14px;
			color: #999;
		}
	}
	.presentation_subtitle{
		font-size: 14px;
		color: #FFF;
		height: 36px;
		line-height: 36px;
		background-color: #6b6b6b;
		padding: 0 15px;
	}
	.box{
		height: 10px;
	}
</style>
